<template>
	<view class="page">
	  <view class="section_1">
	    <view class="image-wrapper_2">
	      <image src="/static/img/0a8213ca193e07cac273536e44392573.png" class="image_5"></image>
	    </view>
	    <image src="/static/img/26483ddb1c06628470bd8e897dd72d5f.png" class="image_6"></image>
	    <view class="section_3"></view>
	  </view>
	  <view class="section_4">
	    <view class="block_1">
	      <view class="group_8">
	        <view class="group_4"></view>
	        <view class="text-wrapper_5">
	          <text lines="1" class="text_2">国鼎金荷</text>
	          <text lines="1" class="text_9">¥999.00</text>
	          <text lines="1" class="text_3">¥299.00</text>
	        </view>
	      </view>
	      <view class="group_5"></view>
	      <view class="group_9">
	        <text lines="1" class="text_4">数量</text>
	        <image src="/static/img/1405cbe0d88df1a8d758754c9949793a.png" class="image_7"></image>
	        <text lines="1" class="text_5">1</text>
	        <image src="/static/img/4658b3b31cc1d508a0e85237264cfbb2.png" class="image_8"></image>
	      </view>
	      <text lines="1" class="text_6">规格</text>
	      <view class="group_10">
	        <view class="text-wrapper_2">
	          <text lines="1" class="text_7">1.5L/坛</text>
	        </view>
	        <view class="text-wrapper_6">
	          <text lines="1" class="text_10">1.5L/坛</text>
	        </view>
	        <view class="text-wrapper_7">
	          <text lines="1" class="text_11">1.5L/坛</text>
	        </view>
	      </view>
	      <view class="group_7" @click="godingdan()">
	        <view class="text-wrapper_3">
	          <text lines="1" class="text_8" >选好了</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script>
	export default {
		methods:{
			godingdan(){
				uni.navigateTo({
					url:'/pages/dingdanye/dingdanye'
				})
			}
		}
	}
</script>

<style>
	.page {
	  position: relative;
	  width: 750rpx;
	  height: 1534rpx;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	}
	.section_1 {
	  position: relative;
	  width: 750rpx;
	  height: 1534rpx;
	  background: url(/static/img/d86fb527ac6a6a5fded6387458efd687.png) 100% no-repeat;
	  background-size: 100% 100%;
	  display: flex;
	  flex-direction: column;
	}
	.section_2 {
	  background-color: rgba(241,241,241,1.000000);
	  position: relative;
	  width: 750rpx;
	  height: 148rpx;
	  display: flex;
	  flex-direction: column;
	}
	.image-wrapper_1 {
	  height: 40rpx;
	  margin-top: 9rpx;
	  display: flex;
	  flex-direction: column;
	  width: 749rpx;
	}
	.image_1 {
	  width: 722rpx;
	  height: 25rpx;
	  margin: 8rpx 0 0 13rpx;
	}
	.box_1 {
	  width: 624rpx;
	  height: 39rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 20rpx 0 40rpx 33rpx;
	}
	.image_2 {
	  width: 20rpx;
	  height: 35rpx;
	  margin-top: 4rpx;
	}
	.text_1 {
	  width: 121rpx;
	  height: 29rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 30rpx;
	  font-family: SourceHanSansCN-Bold;
	  font-weight: 700;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin: 6rpx 0 0 260rpx;
	}
	.image_3 {
	  width: 1rpx;
	  height: 37rpx;
	  margin-left: 222rpx;
	}
	.image_4 {
	  position: absolute;
	  left: 596rpx;
	  top: 69rpx;
	  width: 121rpx;
	  height: 37rpx;
	}
	.group_2 {
	  border-radius: 32rpx;
	  position: absolute;
	  left: 569rpx;
	  top: 56rpx;
	  width: 174rpx;
	  height: 64rpx;
	  border: 1px solid rgba(51,51,51,1);
	  display: flex;
	  flex-direction: column;
	}
	.image-wrapper_2 {
	  background-color: rgba(247,247,247,1.000000);
	  height: 750rpx;
	  margin-bottom: 636rpx;
	  display: flex;
	  flex-direction: column;
	  width: 748rpx;
	}
	.image_5 {
	  width: 555rpx;
	  height: 547rpx;
	  margin: 53rpx 0 0 99rpx;
	}
	.image_6 {
	  position: absolute;
	  left: 0rpx;
	  top: 153rpx;
	  width: 750rpx;
	  height: 750rpx;
	}
	.section_3 {
	  box-shadow: 0px -4px 51px 0px rgba(76,75,75,0.110000);
	  background-color: rgba(255,255,255,1.000000);
	  border-radius: NaNrpx;
	  position: absolute;
	  left: 20rpx;
	  top: 822rpx;
	  width: 710rpx;
	  height: 289rpx;
	  display: flex;
	  flex-direction: column;
	}
	.section_4 {
	  background-color: rgba(0,0,0,0.450000);
	  height: 1534rpx;
	  display: flex;
	  flex-direction: column;
	  width: 750rpx;
	  position: absolute;
	  left: 0rpx;
	  top: 0rpx;
	}
	.block_1 {
	  background-color: rgba(255,255,255,1.000000);
	  width: 750rpx;
	  height: 738rpx;
	  margin-top: 796rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;
	}
	.group_8 {
	  width: 384rpx;
	  height: 200rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 37rpx 0 0 20rpx;
	}
	.group_4 {
	  background-color: rgba(255,255,255,1.000000);
	  border-radius: 10rpx;
	  width: 200rpx;
	  height: 200rpx;
	  display: flex;
	  flex-direction: column;
	}
	.text-wrapper_5 {
	  width: 158rpx;
	  height: 169rpx;
	  margin-top: 5rpx;
	  display: flex;
	  flex-direction: column;
	}
	.text_2 {
	  width: 127rpx;
	  height: 31rpx;
	  overflow-wrap: break-word;
	  color: rgba(42,42,42,1);
	  font-size: 32rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 36rpx;
	  margin-left: 6rpx;
	}
	.text_9 {
	  width: 109rpx;
	  height: 24rpx;
	  overflow-wrap: break-word;
	  color: rgba(221,221,221,1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 28rpx;
	  margin-top: 61rpx;
	}
	.text_3 {
	  width: 157rpx;
	  height: 35rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,59,59,1);
	  font-size: 42rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 28rpx;
	  margin: 18rpx 0 0 1rpx;
	}
	.group_5 {
	  background-color: rgba(241,241,241,1.000000);
	  width: 710rpx;
	  height: 2rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 32rpx 0 0 20rpx;
	}
	.group_9 {
	  width: 710rpx;
	  height: 59rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 30rpx 0 0 20rpx;
	}
	.text_4 {
	  width: 55rpx;
	  height: 26rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 28rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 30rpx;
	  margin-top: 14rpx;
	}
	.image_7 {
	  width: 59rpx;
	  height: 59rpx;
	  margin-left: 484rpx;
	}
	.text_5 {
	  width: 9rpx;
	  height: 23rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 32rpx;
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 30rpx;
	  margin: 16rpx 0 0 21rpx;
	}
	.image_8 {
	  width: 56rpx;
	  height: 56rpx;
	  margin: 1rpx 0 0 26rpx;
	}
	.text_6 {
	  width: 56rpx;
	  height: 26rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 28rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 30rpx;
	  margin: 44rpx 0 0 21rpx;
	}
	.group_10 {
	  width: 637rpx;
	  height: 60rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 41rpx 0 0 21rpx;
	}
	.text-wrapper_2 {
	  background-color: rgba(241,241,241,1.000000);
	  border-radius: 28rpx;
	  height: 60rpx;
	  display: flex;
	  flex-direction: column;
	  width: 200rpx;
	}
	.text_7 {
	  width: 88rpx;
	  height: 25rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 26rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 30rpx;
	  margin: 18rpx 0 0 56rpx;
	}
	.text-wrapper_6 {
	  background-color: rgba(241,241,241,1.000000);
	  border-radius: 28rpx;
	  height: 60rpx;
	  margin-left: 19rpx;
	  display: flex;
	  flex-direction: column;
	  width: 200rpx;
	}
	.text_10 {
	  width: 88rpx;
	  height: 25rpx;
	  overflow-wrap: break-word;
	  color: rgba(153,153,153,1);
	  font-size: 26rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 30rpx;
	  margin: 18rpx 0 0 56rpx;
	}
	.text-wrapper_7 {
	  background-color: rgba(25,83,247,1.000000);
	  border-radius: 28rpx;
	  height: 60rpx;
	  margin-left: 18rpx;
	  display: flex;
	  flex-direction: column;
	  width: 200rpx;
	}
	.text_11 {
	  width: 88rpx;
	  height: 25rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,255,255,1);
	  font-size: 26rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 30rpx;
	  margin: 18rpx 0 0 56rpx;
	}
	.group_7 {
	  background-color: rgba(255,255,255,1.000000);
	  height: 127rpx;
	  margin-top: 80rpx;
	  display: flex;
	  flex-direction: column;
	  width: 750rpx;
	}
	.text-wrapper_3 {
	  background-color: rgba(25,83,247,1.000000);
	  border-radius: 45rpx;
	  height: 90rpx;
	  display: flex;
	  flex-direction: column;
	  width: 710rpx;
	  margin: 20rpx 0 0 20rpx;
	}
	.text_8 {
	  width: 88rpx;
	  height: 30rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,255,255,1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 38rpx;
	  margin: 30rpx 0 0 311rpx;
	}
</style>